﻿<template>
  <v-card>
    <v-card-title>
      <span class="headline" v-text="isEdit ? '修改角色' : '新增角色'"></span>
    </v-card-title>
    <v-divider/>
    <v-card-text class="px-3">
      <v-form v-model="valid" ref="myRoleForm">
        <v-container grid-list-md>
          <v-layout wrap>
            <v-flex mx-auto>
              <v-text-field v-model="roleName" label="角色名称" required />
            </v-flex>
            <v-flex mx-auto>
              <v-text-field v-model="description" label="描述" required />
            </v-flex>
          </v-layout>
        </v-container>
      </v-form>
    </v-card-text>
    <v-card-actions>
      <v-spacer/>
      <v-btn depressed  small @click="submit">保存</v-btn>
      <v-btn depressed small @click="clear">重置</v-btn>
      <v-btn depressed  small @click="close">关闭</v-btn>
    </v-card-actions>
  </v-card>

</template>

<script>
  export default {
    name: "role-form",
    props: {
      oldRole: {
        type: Object
      },
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        valid: false,
        role: {},
        roleName:'',
        description: ""
      }
    },
    methods: {
      submit() {
        const that = this

        // 表单校验
          this.$http({
            method: this.isEdit ? 'put' : 'post',
            url: '/role/save',
            data: this.$qs.stringify({
              id:that.oldRole.id,
              roleName:that.roleName,
              description:that.description,
              createTime:that.oldRole.createTime,
              updateTime:that.oldRole.updateTime

            })
          }).then(() => {
            // 关闭窗口
            this.$emit("close");
            this.$message.success("保存成功！");
          })
            .catch(() => {
              this.$message.error("保存失败！");
            });
      },
      clear() {
        // 重置表单
        this.$refs.myRoleForm.reset();
      },
      close(){
        this.$emit("close");
      },
    },
    watch: {
      oldRole: {// 监控oldRole的变化
        handler() {
          this.roleName = this.oldRole.roleName
          this.description = this.oldRole.description

        },
        deep: true
      }
    }
  }
</script>

<style scoped>

</style>
